import React from 'react'
import { connect } from 'dva'
import router from 'umi/router'
import { Icon } from 'react-fa'
import File from './File'

import style from './index.less'

@connect(({ file: { folder }}) => ({ folder }))
class FilePanel extends React.Component {
	componentDidMount() {
		const {
			dispatch,
			match
		} = this.props;
		const {
			params: {
				id
			}
		} = match
		dispatch({
			type: 'file/folder',
			payload: {
				id: Number(id)
			}
		})
	};
	handleBack = e => {
		router.push('/folder')
	}
	render() {
		const {
			folder,
			...props
		} = this.props
		return (
			<div className="x-layout">
				<div className="x-side">
					<div className="s-title">
						<h2>文件夹</h2>
						<div className="s-toolbar">
							<Icon name="reply" onClick={this.handleBack} />
						</div>
					</div>
					<div className={style.thumb}>
						<Icon name="folder-open-o" />
						<p>{folder}</p>
					</div>
				</div>
				<div className="x-main">
					<File {...props} />
				</div>
			</div>
		)
	}
}

export default FilePanel